<template>
  <div class="container">
    <h3>vue+openlayers: 测量距离和面积（引用封装代码版）</h3>
    <h4>
      <el-button type="success" size="mini" @click="getLength('lenght')">测量长度</el-button>
      <el-button type="success" size="mini" @click="getArea('area')">测量面积</el-button>
      <el-button type="warning" size="mini" @click="clear()">清除</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import {Map,View} from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from "ol/source/XYZ";
import MeasureTool from '@/assets/js/measure.js'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    getLength(x) {
      this.clear();
      MeasureTool.measure(this.map, x, true)
    },
    getArea(x) {
      this.clear();
      MeasureTool.measure(this.map, x, true)
    },
    clear() {
      MeasureTool.measure(this.map, '', false)
    },

    initMap() {
      let raster = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      });
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [raster],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.397411, 39.909186],
          zoom: 10
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
